import{ Form, Input, Button, Checkbox, message, Row, Col,  }from 'antd'
import React, { useEffect, useRef ,useState} from 'react'
import { PhoneOutlined, LoadingOutlined } from '@ant-design/icons';
import { Link, withRouter } from 'react-router-dom'
import { reg } from '../../utils/validate';
import { ajax } from '../../api';
import { toast } from '../../utils/commom';
import { time } from 'console';


// 排版
const layout = {
    labelCol:{
        span:4,
        offset:2
    },
    wrapperCol:{
        span:17,
        offset:1
    }
}

const layout2 = {
    wrapperCol:{
        span:17,
        offset:7
    }
}
function LoginPhone(props:any) {
   const rform:any = useRef()
   const [form] = Form.useForm()
   const {history,location} = props
   let [count, setcount] = useState<number>(120)
   const [flag, setflag] = useState(true)
   const [toggle, settoggle] = useState(true)
   let timer:any = null
   useEffect(()=>{
 
     let phone = new URLSearchParams(location.search).get('phone')
     if(phone){
          rform.current.setFieldsValue({'phone':phone})
          settoggle(false)
     }else{
        rform.current.setFieldsValue({'phone':localStorage.getItem('phone')})
        settoggle(false)
     }
     
     
   },[])
   const checkPhone = ()=>{
       form.validateFields(['phone'])
       .then(res=>{
        settoggle(false) 
       })
       .catch(err=>{
        settoggle(true);
    })
   }
    const onFinish =async (v:any)=>{
    //   console.log(v);
      
    let res:any = await ajax.verifycaptcha(v)
    if(res.code==200){
      sessionStorage.setItem('token',res.token)
      localStorage.setItem('phone',v.phone)
      history.push('/main')
    }
    }
    const onFinishFailed = ()=>{
        toast.error('请输入正确的登录信息')
    //   message.destroy()
    //   message.error('请输入正确的注册信息')
    }
    const sendCaputre =async ()=>{
        setcount(--count)
        setflag(false)
        timer = setInterval(()=>{
            if(count>0){
                setcount(--count)
                setflag(false)
            }else{
                setcount(120)
                setflag(true)
                clearInterval(timer)
                timer = null
            }
        },1000)

        console.log(form.getFieldValue('phone'));
        let res = await ajax.sendcaptcha({
            phone:form.getFieldValue('phone')
        })
    }
    return (
        <div>
             <Form
      name="normal_login"
      initialValues={{ remember: true }}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
      {...layout}
      ref={rform}
      form={form}
    >
      <Form.Item
        label="手机号"
        name="phone"
        rules={[{ required: true, message: '请输入手机号' },
    {pattern:reg.phone,message:'请输入正确的手机号'}]}
      >
        <Input onChange={checkPhone} prefix={<PhoneOutlined className="site-form-item-icon"/>}  placeholder="请输入手机号"/>
      </Form.Item>

      <Form.Item
        label="验证码"
        name="captcha"
        rules={[{ required: true, message: '请输入验证码' },
        {pattern:reg.code,message:'请输入4位的数字验证码'}]}
      >
          <Row>
              <Col span={13}>
              <Input  prefix={<LoadingOutlined className="site-form-item-icon" />}   placeholder="请输入验证码"/>
              </Col>

              <Col span={4} offset={2}>
                  {
                      flag ? <Button type="primary" onClick={sendCaputre} disabled={toggle}  > 发送验证码</Button>
                      : <Button type="primary" disabled > {`剩余${count}s`}</Button>
                  }
             
              </Col>
          </Row>
      </Form.Item>

    
      
      <Form.Item {...layout2}>
            <Button type="primary" block htmlType='submit'> 立即登录</Button>
        </Form.Item>

        <Form.Item {...layout2}>
            <div className="links" style={{width:'100%',display:'flex',justifyContent:"space-between"}}>
                 <Link style={{fontSize:12,color:"#f50"}} to="/register"> 没有账号,立即注册?</Link> 
                 <Link style={{fontSize:12,color:"#0f0"}} to="/forgetpass"> 忘记密码?</Link>    
            </div>
        </Form.Item>
    </Form>
        </div>
    )
}


export default withRouter(LoginPhone)